<template>
  <view>
    <view class="u-p-t-10 u-p-b-20">
      <view class="w-100p">
        <div class="pinmu-box">
          <div class="pinmu-title">储量变化趋势</div>
          <view class="closeicon">
            <u-image
              src="/static/image/icon-hp.png"
              width="50rpx"
              height="50rpx"
              @click="goPage"
            ></u-image>
          </view>
        </div>

        <div>
          <div class="unit">万吨</div>
          <div class="xiana">
            <u-icon name="arrow-down-fill" @click="openPop"></u-icon>
          </div>
        </div>

        <view class="charts-box u-m-t-10">
          <qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
        </view>
      </view>
    </view>
    <div class="month-box">
      <div
        class="month-item"
        @click="changeMonth(3)"
        :class="monthActive == 3 ? 'month-item-active' : ''"
      >
        近三月
      </div>
      <div
        class="month-item"
        @click="changeMonth(6)"
        :class="monthActive == 6 ? 'month-item-active' : ''"
      >
        近六月
      </div>
      <div
        class="month-item"
        @click="changeMonth(12)"
        :class="monthActive == 12 ? 'month-item-active' : ''"
      >
        近十二月
      </div>
    </div>

    <u-popup v-model="show" mode="bottom" @close="closePop">
      <view class="pop-box">
        <div class="pop-title">切换标的</div>
        <u-line></u-line>
        <div class="u-p-20">
          <div v-for="obj in popList">
            <div class="u-p-t-20 u-p-b-20" @click="selectItem(obj)">
              <span>{{ obj.txt }}</span>
              <u-icon
                name="checkbox-mark"
                color="rgb(61, 95, 255)"
                v-if="obj.checked"
              ></u-icon>
            </div>
            <u-line></u-line>
          </div>
        </div>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  watch: {
    // countyNo: {
    //   immediate: true,
    //   handler: function (newval) {
    //     if (newval) {
    //       // this.countyNo=newval

    //       this.threeMonthsAgo = new Date(
    //         this.currentDate.getFullYear(),
    //         this.currentDate.getMonth() - 3,
    //         1
    //       );
    //       this.sixMonthsAgo = new Date(
    //         this.currentDate.getFullYear(),
    //         this.currentDate.getMonth() - 6,
    //         1
    //       );
    //       this.oneYearAgo = new Date(
    //         this.currentDate.getFullYear() - 1,
    //         this.currentDate.getMonth(),
    //         1
    //       );
    //       this.startMonth = this.$formatDate(this.sixMonthsAgo, "yyyy-MM");
    //       this.endMonth = this.$formatDate(new Date(), "yyyy-MM");
    //       this.getServerData();
    //     }
    //   },
    // },
  },
  props: {
    countyNo: {
      type: String,
      default: "",
    },
    customerId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      popList: [
        {
          id: "1",
          txt: "原始地质储量",
          checked: false,
          value: "geologyReserves",
        },
        {
          id: "2",
          txt: "设计可采储量",
          checked: false,
          value: "mineReserves",
        },
        {
          id: "3",
          txt: "矿井采出量",
          checked: false,
          value: "mineDiggingNum",
        },
        {
          id: "4",
          txt: "矿井损失量",
          checked: false,
          value: "mineLossesNum",
        },
        {
          id: "5",
          txt: "期末保有地质储量",
          checked: false,
          value: "endofperiodHaveReserves",
        },
        {
          id: "6",
          txt: "期末保有可采储量",
          checked: false,
          value: "endofperiodCanDiggingReserves",
        },
      ],
      show: false,
      monthActive: "6",
      chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [15, 10, 0, 15],
        enableScroll: false,
        xAxis: {
          disableGrid: true,
          labelCount: 1,
        },
        legendShape: "circle",
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          splitNumber: 2,
        },
        legend: {
          position: "top",
        },
        dataLabel: false,
        extra: {
          line: {
            type: "straight",
            width: 2,
            activeType: "hollow",
          },
        },
      },
      currentDate: new Date(), // 当前日期
      startMonth: "",
      endMonth: "",
      checkedObj: {
        id: "1",
        txt: "原始地质储量",
        checked: false,
        value: "geologyReserves",
      },
    };
  },
  created() {
    // this.getServerData();

          this.threeMonthsAgo = new Date(
            this.currentDate.getFullYear(),
            this.currentDate.getMonth() - 3,
            1
          );
          this.sixMonthsAgo = new Date(
            this.currentDate.getFullYear(),
            this.currentDate.getMonth() - 6,
            1
          );
          this.oneYearAgo = new Date(
            this.currentDate.getFullYear() - 1,
            this.currentDate.getMonth(),
            1
          );
          this.startMonth = this.$formatDate(this.sixMonthsAgo, "yyyy-MM");
          this.endMonth = this.$formatDate(new Date(), "yyyy-MM");
          this.getServerData();
  },
  methods: {
    selectItem(obj) {
      obj.checked = !obj.checked;
      console.log();
      this.popList.forEach((item) => {
        if (item.id !== obj.id) {
          item.checked = false;
        }
      });
      this.checkedObj = obj;
      this.show = false;
      this.getServerData();
    },
    openPop() {
      this.show = true;
    },
    closePop() {
      console.log(this.popList);
    },
    changeMonth(val) {
      if (val === 3) {
        this.startMonth = this.$formatDate(this.threeMonthsAgo, "yyyy-MM");
      } else if (val === 6) {
        this.startMonth = this.$formatDate(this.sixMonthsAgo, "yyyy-MM");
      } else {
        this.startMonth = this.$formatDate(this.oneYearAgo, "yyyy-MM");
      }
      this.getServerData();
      this.monthActive = val;
    },
    goPage() {
      uni.navigateTo({
        url:
          "/pages/cjt/basicInformation/trend/bigChart?chartData=" +
          JSON.stringify(this.chartData),
      });
    },
    getServerData() {
      let data = {
        countyNo: this.countyNo,
        startMonth: this.startMonth,
        endMonth: this.endMonth,
        customerId: this.customerId,
      };
      this.$post("/cjt/app/statisticReserveDynamic", data).then((result) => {
        if (result.body) {
          const arr = result.body;
          console.log();
          let res = {
            categories: arr.map((el) => el.month),
            series: [
              {
                name: "地质储量变动",
                type: "line",
                data: arr.map((el) => el.changeHaveReserves),
                stack: "Total",
                legendShape: "circle",
                label: {
                  show: false,
                },
              },
              {
                name: "可采储量变动",
                type: "line",
                data: arr.map((el) => el.changeCanDiggingReserves),
                stack: "Total",
                legendShape: "circle",
                label: {
                  show: false,
                },
              },
              {
                name: this.checkedObj.txt,
                type: "line",
                data: arr.map((el) => el[this.checkedObj.value]),
                stack: "Total",
                legendShape: "circle",
                label: {
                  show: false,
                },
              },
            ],
          };
          this.chartData = JSON.parse(JSON.stringify(res));
        }
      });
      // const result = {
      //   "code": 200,
      //   "data": "",
      //   "sign": false,
      //   "body": [
      //     {
      //       "times": "2024-01",
      //       "month": "1月",
      //       "entryCount": 0,
      //       "trainPeopleCount": 0,
      //       "completedCount": 0
      //     },
      //     {
      //       "times": "2024-02",
      //       "month": "2月",
      //       "entryCount": 0,
      //       "trainPeopleCount": 0,
      //       "completedCount": 0
      //     },
      //     {
      //       "times": "2024-03",
      //       "month": "3月",
      //       "entryCount": 0,
      //       "trainPeopleCount": 0,
      //       "completedCount": 0
      //     }
      //   ]
      // }

      //this.$get(`/train/trainCompleteTrend?customerNo=${this.customerNo}`).then(result => {
      // if (result.body) {
      //   const arr = result.body

      //   let res = {
      //     categories: arr.map(el => el.month),
      //     series: [
      //       {
      //         name: "入职人数",
      //         data: arr.map(el => el.entryCount)
      //       },
      //       {
      //         name: "参与培训人数",
      //         data: arr.map(el => el.trainPeopleCount)
      //       },
      //       {
      //         name: "达标人数",
      //         data: arr.map(el => el.completedCount)
      //       }
      //     ]
      //   };
      //   this.chartData = JSON.parse(JSON.stringify(res));
      // }
      //})
    },
  },
};
</script>

<style lang="scss" scoped>
.charts-box {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  height: 250px;
}

.month-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-radius: 2px, 0px, 0px, 2px;
  padding: 25px;

  .month-item {
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid rgb(229, 229, 229);
    font-size: 10px;
  }

  .month-item-active {
    border-color: rgba(91, 172, 132, 0.5);
    background: rgb(238, 247, 242);
    color: rgb(91, 172, 132);
  }
}

.unit {
  margin-left: 10px;
  position: absolute;
}

.xiana {
  position: absolute;
  right: 10px;
  z-index: 999;
}

.pop-box {
  .pop-title {
    text-align: center;
    padding: 10px;
  }
}

.pinmu-box {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  padding-top: 0;

  .pinmu-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
  }
}
.timeBox {
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
}
</style>
